import {useContext, useEffect} from "react";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {Flex, Tabs} from "antd";
import "./index.less";
import HxSearch from "@/components/HxSearch";
import HxIcon from "@/components/HxIcon";
import HxScrollMenu from "@/components/HxScrollMenu";
import HxCyCard from "@/components/HxCyCard";
import HxJournalSection from "@/components/HxJournalSection";
import FeaturedColumns from "@/pages/HomePage/FeaturedColumns";
import EditorsPicks from "@/pages/HomePage/EditorsPicks";
import HotArticles from "@/pages/HomePage/HotArticles";
import SpecialTypeOfArticles from "@/pages/HomePage/SpecialTypeOfArticles";
import DistinguishedSpotlight from "@/pages/HomePage/DistinguishedSpotlight";
import BizSearchBar from "@/pages/HomePage/BizSearchBar";
import TopNewsBanner from "@/pages/HomePage/TopNewsBanner";
import AdBanner from "@/pages/HomePage/AdBanner";
import JournalDisplayCases from "@/pages/HomePage/JournalDisplayCases";
import AriclesTool from "@/pages/HomePage/ArticlesTool";


export default function HomePage() {

    const {setLayoutBgClassName} = useContext(HxConfigContext)
    useEffect(() => {
        setLayoutBgClassName?.("bg-bule-450");
        return () => {
            setLayoutBgClassName?.(undefined);
        }
    }, []);

    return (
        <div className={"home-page-container"}>
            <div className={"home-page-header"}>
                <BizSearchBar/>
                <TopNewsBanner/>
            </div>

            <div className={"home-page-content"}>
                <JournalDisplayCases/>
                <FeaturedColumns/>
                <div className={"home-articles-wrapper"}>
                  <EditorsPicks/>
                  <HotArticles/>
                </div>
                <AdBanner/>
                <SpecialTypeOfArticles/>
                <AriclesTool/>
                <DistinguishedSpotlight/>
            </div>
        </div>
    );
}
